import React, { useEffect, useState } from 'react';
import '../MonitoringPanel.css';

interface InspectionLogPanelProps {
  // 可以添加从父组件传入的属性
}

// 巡检日志数据接口
interface InspectionLog {
  id: string;
  sequence: number;
  time: string;
  content: string;
  status: 'pending' | 'processing' | 'completed' | 'failed';
}

// 生成模拟的巡检日志数据
const generateInspectionLogs = (): InspectionLog[] => {
  const statuses: ('pending' | 'processing' | 'completed' | 'failed')[] = ['pending', 'processing', 'completed', 'failed'];
  const contents = [
    '服务器温度异常',
    '网络带宽波动',
    '电源设备例行检查',
    '空调系统维护',
    '机柜清洁',
    '消防系统测试',
    'UPS电池检查',
    '数据备份验证',
    '安全漏洞扫描',
    '系统补丁更新'
  ];
  
  const logs: InspectionLog[] = [];
  
  // 生成最近7条日志
  for (let i = 0; i < 7; i++) {
    const now = new Date();
    now.setMinutes(now.getMinutes() - i * 30); // 每30分钟一条记录
    
    logs.push({
      id: `log-${i + 1}`,
      sequence: i + 1,
      time: now.toLocaleString('zh-CN'),
      content: contents[Math.floor(Math.random() * contents.length)],
      status: statuses[Math.floor(Math.random() * statuses.length)]
    });
  }
  
  return logs;
};

const InspectionLogPanel: React.FC<InspectionLogPanelProps> = () => {
  const [logs, setLogs] = useState<InspectionLog[]>(generateInspectionLogs());
  const [isAnimating, setIsAnimating] = useState(false);

  // 模拟数据更新
  useEffect(() => {
    const interval = setInterval(() => {
      setIsAnimating(true);
      setTimeout(() => {
        setLogs(prevLogs => {
          const newLogs = generateInspectionLogs();
          // 保留前两条记录，添加新记录以保持连续性
          return [...prevLogs.slice(0, 2), ...newLogs.slice(2)];
        });
        setIsAnimating(false);
      }, 300);
    }, 30000); // 每30秒更新一次数据

    return () => clearInterval(interval);
  }, []);

  // 获取状态对应的显示文本和颜色
  const getStatusInfo = (status: string) => {
    switch (status) {
      case 'pending':
        return { text: '待处理', color: '#74b6ff' };
      case 'processing':
        return { text: '处理中', color: '#ffaa00' };
      case 'completed':
        return { text: '已完成', color: '#44ff44' };
      case 'failed':
        return { text: '失败', color: '#ff4444' };
      default:
        return { text: '未知', color: '#a0aec0' };
    }
  };

  return (
    <div className={`monitoring-panel ${isAnimating ? 'data-update' : ''}`}>
      <div className="panel-header">
        <h3 className="panel-title">巡检日志</h3>
      </div>
      
      <div className="log-table-container">
        <table className="log-table">
          <thead>
            <tr>
              <th>序号</th>
              <th>时间</th>
              <th>事件内容</th>
              <th>处理状态</th>
            </tr>
          </thead>
          <tbody>
            {logs.map((log, index) => {
              const statusInfo = getStatusInfo(log.status);
              return (
                <tr 
                  key={log.id} 
                  className={isAnimating ? `log-row log-row-${index}` : ''}
                  style={isAnimating ? {
                    animation: `logSlideIn 0.5s ease-out forwards`,
                    animationDelay: `${index * 0.1}s`
                  } : {}}
                >
                  <td>{log.sequence}</td>
                  <td>{log.time}</td>
                  <td className="log-content">{log.content}</td>
                  <td>
                    <span 
                      className="status-badge"
                      style={{ color: statusInfo.color }}
                    >
                      {statusInfo.text}
                    </span>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default InspectionLogPanel;